<!-- 首页 -->
<template>
  <view class="Content">
    <view class="Box">
      <view class="Top">
        <view id="top">
          <view class="GlassBody">
            <image class="Glass" src="/static/tab/searchimg.png"></image>
          </view>
          <view id="TextTop">
            <input type="text" placeholder="搜索商品，工业机器" class="TextTop" />
          </view>
        </view>
      </view>
      <view class="slider">
        <swiper autoplay="true" circular="true" direction="horizontal" class="Cirswiper">
          <swiper-item>
            <image class="Swaper" src="/static/tab/banner@2x.png"></image>
          </swiper-item>
          <swiper-item>
            <image class="Swaper" src="/static/tab/banner@2x.png"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="MenuCli">
        <view class="Menu">
          <a href="">大型的空调</a>
        </view>
        <view class="Menu">
          <a href="">工业机器</a>
        </view>
        <view class="Menu">
          <a href="">大型的空调</a>
        </view>
        <view class="Menu">
          <a href="">工业机器</a>
        </view>
        <view class="Menu">
          <a href="">大型的空调</a>
        </view>
        <view class="Menu">
          <a href="">工业机器</a>
        </view>
        <view class="Menu">
          <a href="">大型的空调</a>
        </view>
      </view>
      <view class="Electry">
        <view id="Electry" v-for="(item, index) in 8" :key="index" @click="nav">
          <image class="ElectryIMG" src="/static/tab/Slice 4@2x (5).png"></image>
          <view class="ElectryText">圆柱空调</view>
        </view>
      </view>
      <view class="AllShopping">
        <view class="Shopping" v-for="(item, index) in 8" :key="index" @click="godetail(item)">
          <image class="Shop" src="/static/tab/Slice 4@2x (1).png"></image>
          <view class="TextItem">
            <view class="Items">美的空调冷静星III</view>
            <view class="ViceIt">1 变频 分体套机 极地白 美的</view>
            <view class="Buy">限时秒杀</view>
            <view class="Total">
              <view class="Money">￥299</view>
              <view class="No">¥699</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <custom-tabbar></custom-tabbar>
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar.vue'
export default {
  data() {
    return {};
  },
  components: {
    CustomTabbar
  },
  methods: {
    nav() {
    },
    godetail() {
      uni.navigateTo({
        url: '/pages/GoodsDetail/GoodsDetail?id=1'
      });
    },
  },
};
</script>

<style scoped>
.Total {
  height: 46upx;
}

.No {
  height: 26upx;
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 20upx;
  color: #b9babd;
  line-height: 26upx;

  font-style: normal;
  text-decoration-line: line-through;
  text-transform: none;
  display: inline-block;
  position: relative;
  transform: translateY(-14%);
  margin-left: 8upx;
}

.Money {
  color: #000;
  font-size: 34upx;
  font-family: PingFang HK-Medium;
  font-weight: medium;

  line-height: 46upx;

  display: inline-block;
}

.TextItem .Buy {
  color: #dea47a;
  font-size: 20upx;
  background: #ffe6d5;
  width: 85upx;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  padding: 5upx 8upx;
  margin-top: 10upx;
}

#Buy {
  width: 96upx;
  margin-top: 15upx;
  box-sizing: border-box;
  padding-left: 8upx;
  padding-bottom: 4upx;
  padding-right: 8upx;
  padding-top: 4upx;
  border-radius: 4px 4px 4px 4px;
  background: #ffe6d5;
}

.TextItem .ViceIt {
  color: #a2a2a2;
  font-size: 24upx;
  line-height: 32upx;
  width: 302upx;
  margin-top: 8upx;
}

.Items {
  font-size: 28upx;
  color: #3b3b3b;
  margin-top: 26upx;
}

.TextItem {
  margin-top: 2upx;

  height: 186upx;
  text-align: left;
}

.Shop {
  width: 318upx;
  height: 318upx;
  background: #f9f9f9;
  padding-top: 6upx;
  padding-left: 10upx;
  padding-right: 12upx;
  padding-bottom: 16upx;
  box-sizing: border-box;
}

.Shopping {
  width: 318upx;
  height: 530upx;
  float: left;
  margin-top: 38upx;
}

.Shopping:nth-child(even) {
  float: right;
}

.AllShopping {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  padding-bottom: 200upx;
}

.ElectryIMG {
  width: 88upx;
  height: 88upx;
  margin: 0 auto;
  display: block;
}

.ElectryText {
  color: #3b3b3b;
  font-size: 22upx;
  text-align: center;
  margin-top: 24upx;
  font-family: "PingFang HK-Regular";
}

#Electry {
  width: 167upx;

  margin-top: 46upx;
}

.Electry {
  margin-top: 10upx;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

.Menu a:active {
  color: #000;
  background-image: src("/static/tab/Slice 3@2x.png");
  background-size: 32upx;
  background-position: center;
}

.Menu a {
  text-decoration: none;
  color: #666666;
  display: inline-block;
  font-size: 28upx;
}

.Menu {
  display: inline-block;
  margin-right: 20px;
  margin-top: 42upx;
  white-space: nowrap;
}

.MenuCli {
  display: flex;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.Menu:last-child {
  margin-right: 0;
}

.MenuCli::-webkit-scrollbar {
  display: none;
}

.Swaper {
  width: 670upx;
  height: 260upx;
  margin-top: 32upx;
}

.slider .Cirswiper {
  width: 100%;
  height: 280upx;
}

swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.Top {
  width: 670upx;
  padding: 20rpx 0;
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  top: 0upx;
  z-index: 99;
  background: white;
  left: 0;
  box-shadow: 0upx 0upx 5upx rgba(0, 0, 0, 0.2);
}

#top {
  background: #f8f8f8;
  width: 670upx;
  height: 80upx;
  margin: 0 auto;
}

.Glass {
  width: 26upx;
  height: 26upx;
  padding-top: 4upx;
  padding-bottom: 6upx;
  padding-right: 6upx;
  position: relative;
  top: 50%;
  transform: translateY(-40%);

}

.GlassBody {
  width: 32upx;
  height: 36upx;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 196upx;
}

#TextTop {
  width: 240upx;
  height: 26upx;
  margin: 0 auto;
  margin-left: 236upx;

}

.TextTop {
  width: 234upx;
  height: 14upx;
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 26upx;
  line-height: 22upx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-65%);
}

.Box {
  width: 670upx;

  margin-top: 12upx;
}

.Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 80upx;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
